<template>
    <ul class="nav">
        <li class="img">
            <img src="static/updata/logo.png" alt="">
        </li>
        <li class="vadio">
            <p>视频</p>
            <i></i>
        </li>
        <router-link tag="li" to="/" class="broadcast">
            <p>直播</p>
            <i></i>
        </router-link>
        <router-link tag="li" to="/community"  class="community">
            <p>社区</p>
            <i></i>
            <span class="iconfont icon-new"></span>
        </router-link>
    </ul>
</template>


<style lang="scss" scoped>
    .nav {
        margin-top: 10px;
        padding: 0 10px;
        display: flex;
        .community {
            position: relative;
            span {
                position: absolute;
                left: 27px;
                top: -7px;
                font-size: 20px;
                color: #e93720;
            }
        }
        .img {
            margin: 0;
            img {
                width: 60px;
                margin-right: 20px;
            }   
        }

        li {
            margin: 8px 15px;
            p {
                font-weight: 600;
            }
            i {
                display: block;
                width: 16px;
                height: 3px;
                margin-left: 8px;
                margin-top: 7px;
            }
            &:hover {
                color: #e93720;
            }
            &:hover i {
                background-color: #e93720;
            }
        }
    }



</style>